<template>
    <el-dialog class="editDict" title="编辑分类" :visible.sync="dictDialogFormVisible" v-if="dictDialogFormVisible" width="40%" :before-close="handleCancelDict" :close-on-click-modal="false" top="8vh" v-dialogDrag>
      <el-form :model="dictForm" ref="form" label-width="110px" :rules="dictDialogFormRules">
        <el-form-item label="上级分类">
          <el-input v-model="equalName" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="typeName">
          <el-input v-model="dictForm.typeName"></el-input>
        </el-form-item>
        <el-form-item label="分类值" prop="typeCode">
          <el-input v-model="dictForm.typeCode"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number controls-position="right" v-model="dictForm.sortOrder" :min="0" :max="999"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dictForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancelDict">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleSubmitDict">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { getDictTreeSingle, updateDictTreeNode } from '@/api/tools/dict.js';
export default {
    data() {
        return {
          dictDialogFormVisible: false,
          equalName: '', // 上级分类名称
          dictForm: {
            id: '',
            parentId: '',
            remark: '',
            sortOrder: 0,
            typeCode: '',
            typeName: ''
          },
          dictDialogFormRules: {
            typeName: [{
              required: true,
              message: '分类名称不能为空',
              trigger: 'blur'
            }],
            typeCode: [{
              required: true,
              message: '分类值不能为空',
              trigger: 'blur'
            }]
          }
        }
    },
    props: {
      propEditDict: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propEditDict: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.dictDialogFormVisible) {
            const that = this
            that.getDictInfo(newVal.id)
          }
        }
      }
    },
    methods: {
      async getDictInfo(id) {
        const that = this
        if (!id) {
          that.dictDialogFormVisible = true
          return false
        }
        let res = await getDictTreeSingle(id)
        if (res.code == 0) {
          that.dictForm.sortOrder = res.data.sortOrder
          that.dictForm.id = res.data.id
          that.dictForm.remark = res.data.remark
          that.dictForm.typeCode = res.data.typeCode
          that.dictForm.typeName = res.data.typeName
          if (res.data.parentId) {
            that.dictForm.parentId = res.data.parentId
            getDictTreeSingle(res.data.parentId).then(result => {
              if (result.code == 0) {
                that.equalName = result.data.typeName
              } else {
                that.$message.error(result.message)
              }
              that.dictDialogFormVisible = true
            })
          } else {
            that.dictDialogFormVisible = true
          }
        } else {
          that.$message.error(res.message)
        }
      },
      handleCancelDict() {
        const that = this
        that.dictDialogFormVisible = false
        that.equalName = ''
        that.dictForm = {
          id: '',
          parentId: '',
          remark: '',
          sortOrder: 0,
          typeCode: '',
          typeName: ''
        }
        that.$refs.form.resetFields()
      },
      handleSubmitDict() {
        const that = this
        that.$refs['form'].validate(async valid => {
          if (valid) {
            const res = await updateDictTreeNode(that.dictForm)
            if (res.code === 0) {
              that.$message.success('修改分类成功！')
              that.handleCancelDict()
              that.$emit("updateTree", 'edit')
            } else {
              that.$message.error(res.message)
            }
          }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
.editDict /deep/ .el-input-number {
  width: 100%;
}
.editDict /deep/ .el-input-number .el-input__inner {
  text-align: left;
}    
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}    
</style>
